<template>
	<view class="wrap">
		<!-- ref和show属性是一定要设置的 -->
		<!-- 先缩小再放大，再缩小 -->
		<uni-transition ref="one" mode-class="fade" custom-class="div1" :show="true"></uni-transition>
		<uni-transition ref="tow" mode-class="fade" custom-class="div2" :show="true"></uni-transition>
		<uni-transition ref="leftTop" mode-class="fade" custom-class="div5" :show="true"></uni-transition>
		<uni-transition ref="center" mode-class="fade" custom-class="center" :show="true"></uni-transition>
		<uni-transition ref="leftBottom" mode-class="fade" custom-class="div6" :show="true"></uni-transition>

		<uni-transition ref="rightTop" mode-class="fade" custom-class="div7" :show="true"></uni-transition>
		<uni-transition ref="center2" mode-class="fade" custom-class="center2" :show="true"></uni-transition>
		<uni-transition ref="rightBottom" mode-class="fade" custom-class="div8" :show="true"></uni-transition>
		<uni-transition ref="img" mode-class="fade" custom-class="img" :show="true">
			<image src="../../static/OIP-C.jpg" mode="widthFix"></image>
		</uni-transition>
		<uni-transition ref="three" mode-class="fade" custom-class="div3" :show="true"></uni-transition>
		<uni-transition ref="four" mode-class="fade" custom-class="div4" :show="true"></uni-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			// 调用动画函数
			setTimeout(() => {
				this.starAni();
			}, 100)
		},
		// mounted() {
		// 	this.starAni();
		// },
		methods: {
			// 创建动画函数
			starAni() {
				// 必须确认ref对象获取成功
				//console.log(this.$refs.one);
				this.$refs.center.step({
					translateX: '-100px',
					scale: 0.759
				}, {
					duration: 1000
				})
				this.$refs.leftTop.step({
					rotate: 45,
					translateY: '60px',
					width: '41%'
				}, {
					duration: 1000
				})
				this.$refs.leftBottom.step({
					rotate: -39,
					translateY: '-60px',
					width: '38%'
				}, {
					duration: 1000
				})

				this.$refs.center2.step({
					translateX: '100px',
					scale: 0.759
				}, {
					duration: 1000
				})
				this.$refs.rightTop.step({
					rotate: -45,
					translateY: '60px',
					width: '41%'
				}, {
					duration: 1000
				})
				this.$refs.rightBottom.step({
					rotate: 39,
					translateY: '-60px',
					width: '38%'
				}, {
					duration: 1000
				})
				this.$refs.img.step({
					translateY: '350%',
					rotate: 360,
				}, {
					duration: 1000
				})
				this.$refs.img.step({
					scale: 2
				}, {
					duration: 1000
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 2100)
				// 执行动画
				this.$refs.img.run();
				this.$refs.center.run();
				this.$refs.leftTop.run();
				this.$refs.leftBottom.run();
				this.$refs.center2.run();
				this.$refs.rightTop.run();
				this.$refs.rightBottom.run();
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
		height: calc(93vh);


		.div1 {
			width: 100%;
			height: 3px;
			background: linear-gradient(red, yellow, blue, orange);
		}

		.div5 {
			width: 50%;
			border: 1px solid #ec417b;
		}

		.div6 {
			position: absolute;
			bottom: 0;
			width: 50%;
			border: 1px solid #ec417b;
		}

		.div7 {
			position: absolute;
			right: 0;
			width: 50%;
			border: 1px solid #ec417b;
		}

		.div8 {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 50%;
			border: 1px solid #ec417b;
		}

		.center {
			position: absolute;
			right: 50%;
			// width: 50%;
			height: 100%;
			border: 1px solid #ec417b;
		}

		.center2 {
			position: absolute;
			left: 50%;
			// width: 50%;
			height: 100%;
			border: 1px solid #ec417b;
		}

		.img {
			position: absolute;
			top: 0%;
			left: 40%;
			width: 100px;

			image {
				width: 90px;
			}
		}

		.div2 {
			position: absolute;
			top: 0;
			right: 0;
			width: 3px;
			height: 100%;
			background: linear-gradient(red, yellow, blue, orange);
		}

		.div3 {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 3px;
			background: linear-gradient(red, yellow, blue, orange);
		}

		.div4 {
			position: absolute;
			top: 0;
			width: 3px;
			height: 100%;
			background: linear-gradient(red, yellow, blue, orange);
		}
	}
</style>